import React, {Component} from 'react'

import {normalizedData} from './normailzeDemo'
import './list.css'
import {Link} from "react-router-dom"

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      articles: null,
      users: null,
      comments: null,
      result: [],
    }
  }

  componentDidMount() {
    this.asyncPostMockList()
  }


  asyncPostMockList() {
    const mockUrl = "http://mock.52react.cn/mock/5db1ba8d8e0c626e95d4170e/v1/list"
    fetch(mockUrl).then(res =>
      res.json()
    ).then(data => {
      if (data.success) {
        console.log('papers', normalizedData)
        const {entities: {articles, users, comments}, result} = normalizedData
        this.setState({
          result,
          articles,
          users,
          comments
        })
      }
    })
  }

  _selectClick = (index) => {
    alert(index)

  }

  render() {
    const {
      result,
      articles,
      users,
      comments
    } = this.state
    console.log('articles', articles, result)
    return (
      <div>
        <ul>
          {
            result.map(item => (
              <ListItem
                selectClick={this._selectClick}
                item={articles[item]}
                users={users}
                key={articles[item].id}/>
            ))
          }
        </ul>
      </div>
    )
  }
}

class ListItem extends Component {
  constructor(props) {
   super(); // 😬 忘了传入 props
   console.log('✅',props); // ✅ {}
   console.log('😬',this.props); // 😬 undefined
 }

  render() {
    const {users, item, selectClick} = this.props
    return (
      <li className="list-wrapper">
        <Link to={'/list/'+item.id}>
          <div>"标题:" {item.title}</div>
          <h3>作者:{users[Number(item.author)].name}</h3>
          <div>时间:{item.time}</div>
        </Link>
      </li>


    )
  }
}




export default List
